<template>
  <div class="app-container">
    <h-table-list
      border
      type="local"
      :data="tableData"
      :page-sizes="[10, 20]"
      :columns="columns"
      :form-options="formOptions"
    >
      <ListOpearteButton />
      <template slot="preview-column" slot-scope="scope">
        <p>{{ scope.row.status }}</p>
      </template>
      <template slot="operate-column" slot-scope="scope">
        <tableButton :row="scope.row" />
      </template>
      <template slot="items-sum" slot-scope="scope">
        <el-popover trigger="hover" placement="bottom">
          <h-table-list
            border
            type="local"
            :data="tableData"
            :page-sizes="[10, 20]"
            :columns="column2s"
          ></h-table-list>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.itemsSum }}</el-tag>
          </div>
        </el-popover>
      </template>
    </h-table-list>
  </div>
</template>

<script>
import { fetchList } from "@/api/point-check";
import ListOpearteButton from "@/components/AllButton/button2";
import tableButton from "@/components/AllButton/button3";
export default {
  name: "checkPlan",
  components: { ListOpearteButton, tableButton },
  data() {
    return {
      formOptions: {
        inline: true,
        submitBtnText: "搜索",
        forms: [
          { prop: "name", label: "计划名称" },
          { prop: "deviceName", label: "设备名称" },

          { prop: "deviceNumber", label: "设备编号" },
          {
            prop: "departmentName",
            label: "使用部门",
            itemType: "select",
            options: [
              { value: "", label: "部门1" },
              { value: 0, label: "部门2" },
              { value: 1, label: "部门3" }
            ]
          },

          { prop: "membName", label: "点检员" },
          {
            prop: "status",
            label: "计划状态",
            itemType: "select",
            options: [
              { value: 2, label: "已完成" },
              { value: 0, label: "未完成" },
              { value: 1, label: "待审批" }
            ]
          }
        ]
      },
      columns: [
        { prop: "id", label: "序号", width: 140 },
        { prop: "name", label: "计划名称", minWidth: 180 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "deviceNumber",
          label: "设备编号",
          width: 100
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "departmentName", label: "使用部门", minWidth: 180 },
        { prop: "membName", label: "点检员", minWidth: 180 },
        {
          prop: "itemsSum",
          label: "点检项",
          slotName: "items-sum",
          minWidth: 180
        },
        { prop: "planPeriod", label: "计划周期", minWidth: 180 },
        { prop: "newTaskTime", label: "最新任务时间", minWidth: 180 },
        {
          prop: "status",
          label: "计划状态",
          minWidth: 180,
          slotName: "preview-column"
        },
        {
          prop: "operate",
          label: "操作",
          minWidth: 180,
          slotName: "operate-column",
          fixed: "right"
        }
      ],
      column2s: [
        { prop: "id", label: "序号", width: 140 },
        { prop: "name", label: "计划名称", minWidth: 180 },

        {
          prop: "deviceName",
          label: "设备名称",
          width: 100
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "deviceNumber",
          label: "设备名称",
          width: 100
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "departmentName", label: "使用部门", minWidth: 180 },
        { prop: "membName", label: "点检员", minWidth: 180 }
      ],
      tableData: []
    };
  },

  methods: {
    getList() {
      fetchList().then(res => {
        console.log(res);
        this.tableData = res.items;
      });
    },
    add(row) {
      console.log(row, "++++++++++");
      this.$router.push("/plantCheck/edit/:id");
    },
    edit(row) {
      this.$router.push("/basicEquipment/edit/:id");
      console.log("edit");
    },
    downloadIdentify(row) {
      console.log("下载设备标识卡");
      this.dialogFormVisible = true;
    },
    delete(row) {
      console.log(row);
      this.$confirm(
        `确认删除？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    update() {},
    detail(row) {
      console.log(row);
      this.$router.push("/basicEquipment/detail/:id");
    }
  },
  mounted() {
    this.$store
      .dispatch(this.$store_url_button, {
        add: this.add,
        delete: this.delete,
        edit: this.edit,
        detail: this.detail
      })
      .then(() => {
        this.getList(); // 表格数据
      });
  }
};
</script>
